<template>
	<view class="container">
		<view class="settle">
			<label class="radio" @click="changeAllstate">
			    <radio color="#C00000" :checked="isFullCheck" /><text>全选</text>
			</label>
			<view class="amount-box">
			    合计:<text class="amount">¥:{{ checkedGoodsAmount }}</text>
			  </view>
			<view class="btn-settle" @click="settlement">结算({{checkedCount}})</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
	export default {
		name:"my-settle",
		data() {
			return {
				res:0
			};
		},
		computed:{
			...mapState('m_cart', ['cart']),
			...mapGetters('m_cart', ['checkedCount', 'total', 'checkedGoodsAmount']),
			...mapGetters('m_user', ['addstr']),
			...mapState('m_user', ['token']),
			
			// 总数量 = 选中数量就true
			isFullCheck(){
				return this.checkedCount === this.total
			}
		},
		filters:{
			tofixed(num){
				return Number(num).toFixed(2)
			}
		},
		methods:{
			...mapMutations('m_cart', ['updataAllGoodsState']),
			
			// 全选
			changeAllstate(){
				this.updataAllGoodsState(!this.isFullCheck)
			},
			test(){
				this.cart.forEach(x => {
					
					return this.res += parseInt(x.goods_count * x.goods_price)
				})
				console.log(this.res);
			},
			settlement(){
				if(!this.checkedCount) return this.$u.toast("请勾选商品")
				if(!this.addstr) return this.$u.toast("请选择收货地址")
				if(!this.token) {
					
				    this.$u.toast("你还没有登录")
					setTimeout(()=>{
						uni.switchTab({
							url: '../../pages/center/center'
						})
					}, 1500)
				} else {
					this.$u.toast('结算中')
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.settle {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		border-top: 1px solid #efefef;
		display: flex;
		height: 50px;
		align-items: center;
		font-size: 14px;
		background-color: white;
		justify-content: space-between;
		.radio {
			padding-left: 20rpx;
		}
		.amount-box {
			color: red;
		}
		.btn-settle {
			height: 50px;
			line-height: 50px;
			margin-right: 20rpx;
			min-width: 80px;
			color: white;
			text-align: center;
			background-color: #c00000;
		}
	}
</style>
